<template>
  <div id="app">
    <div>
      <span>图书名称:</span>
      <input
      ref="InputBox"
      v-model.trim="name"
      type="text"
      @keyup.enter="onAddChange"
      @keyup.esc="onEsc"
      />
    </div>
    <div>
      <button
      @click="onAddChange"
      :disabled="bol"
      >添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>图书名称</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
        <book-main
        v-for="item in list"
        :key="item.id"
        :bookData="item"
        @on-del="onDel"
        :isDel="isDel"
        @on-edit="onEdit"
        :flag="flag"
        />
      </table>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import BookMain from './components/BookMain.vue'
axios.defaults.baseURL = 'http://liufusong.top:4000/'
console.log(axios)
export default {
  components: { BookMain },
  data () {
    return {
      list: [], // 用来存储服务器上拿来的数据
      name: '', // 书名，绑定了输入框
      bol: false, // 判断书名是否存在，false不存在，true存在
      isDel: false, // 判断是否禁用删除按钮，false不禁用，true存在
      flag: false, // 判断是否禁用删除按钮，false不禁用，true存在
      id: '' // 获得需要编辑的数据的id
    }
  },
  watch: {
    name (newVal) { // 监听是否有图书名是否已存在
      this.getName(newVal)
    },
    list () { // 监听数组长度，判断是否禁用删除按钮
      if (this.list.length > 1) {
        this.isDel = false
      } else {
        this.isDel = true
      }
    }
  },
  methods: {
    onEsc () { // 清空输入框，取消编辑
      this.name = ''
      this.flag = false
    },
    async onEdit2 () { // 将重新编辑的数据上传服务器
      try {
        const res = await axios({
          method: 'PUT',
          url: 'books/' + this.id,
          data: {
            name: this.name
          }
        })
        console.log(res)
        this.getList()
        this.name = ''
      } catch (error) {
        alert('请求错误！')
      }
    },
    async onEdit (id) { // 将
      try {
        const res = await axios({
          url: 'books/' + id
        })
        this.name = res.data.name
        this.id = id
        this.flag = true
        this.$refs.InputBox.focus()
      } catch (error) {
        alert('请求错误！')
      }
    },
    async onDel (id) {
      try {
        const res = await axios({
          url: 'books/' + id,
          method: 'DELETE'
        })
        console.log(res)
        this.getList()
      } catch (error) {
        alert('请求错误！')
      }
    },
    async getName (val) {
      try {
        const res = await axios({
          url: 'books/book/' + val
        })
        // console.log(res.data.status)
        const num = res.data.status
        if (num === 1) {
          this.bol = true
        } else {
          this.bol = false
        }
      } catch (error) {
        alert('请求错误！')
      }
    },
    async getAdd (val) {
      try {
        const res = await axios({
          url: 'books',
          method: 'POST',
          data: {
            name: val
          }
        })
        console.log(res)
        this.getList()
      } catch (error) {
        alert('请求错误！')
      }
    },
    onAddChange () {
      if (this.name === '') {
        return alert('不能为空')
      }
      if (this.bol) {
        return alert('该图书已添加')
      }
      if (this.flag) {
        this.onEdit2()
        this.flag = false
      } else {
        this.getAdd(this.name)
        this.name = ''
      }
    },
    async getList () {
      try {
        const res = await axios({
          url: 'books'
        })
        console.log(res.data)
        this.list = res.data
      } catch (error) {
        alert('请求错误！')
      }
    }
  },
  created () {
    this.getList()
  }

}
</script>
